<script setup>
import { GetAddresAPI } from '@/apis/address';
import { usePayStore, useUserStore } from '@/stores';

const emit = defineEmits([ 'changeStatus' ])


const address = ref()
const getAddressData = async () => {
  const result = await GetAddresAPI(useUserStore().token)
  address.value = result
  console.log(result);
  
}
const submit = () => {
  const currentAddress = address.value[currentIndex.value]
  console.log(currentAddress);
  
  
  usePayStore().createOrder.addressId = currentAddress.id
  usePayStore().createOrder.provinces = currentAddress.province
  usePayStore().createOrder.city = currentAddress.city
  usePayStore().createOrder.district = currentAddress.district
  usePayStore().createOrder.detail_address = currentAddress.detail_address
  usePayStore().createOrder.name = currentAddress.address_username
  usePayStore().createOrder.phone = currentAddress.address_phone

  emit('changeStatus')
}

onMounted(async() => {
  const loading = ElLoading.service({
    lock: true,
    text: '加载中',
    background: 'rgba(0, 0, 0, 0.7)',
  })
  await getAddressData()
  loading.close()
})
const currentIndex = ref(0)
</script>

<template>

  <el-card 
    v-for="(item, index) in address" :key="item.id" 
    v-loading="loading"
    element-loading-text="加载中..."
    class="address" :class="{active: currentIndex === index}"
    @click="currentIndex = index"
  >
    <ul>
      <li>
        <div>
          {{ item.address_username }}
          {{ item.province  }} {{ item.city }} {{ item.district }} {{ item.detail_address }} 
          {{ item.address_phone }}
        </div>
      </li>
    </ul>
  </el-card>

  <el-button class="sutmit" @Click="submit">确认</el-button>
</template>

<style lang="scss" scoped>
.address {
  display: flex;
  margin-bottom: 10px;
  min-height: 70px;
}
.address {
  padding: 10px;
  // border: 1px solid #41b883;
}
// .address:hover {
//   border: 1px solid #41b883;
// }
.active {
  border: 1px solid #41b883;
}
.sutmit {
  width: 200px;
  justify-content: center;
}
</style>